<template>
    <van-popup :show="show" position="bottom" @close="closePopup" @click-overlay="closePopup">
        <van-picker v-if="range.length" show-toolbar :title="title" toolbar-class="toolbar" :columns="range" :value-key="valueKey" :default-index="defaultIndex" :loading="loading" @confirm="confirm" @cancel="cancel" />
        <div v-else class="picker-popup-empty" >
            <span v-if="emptyDesc" class="empty-text"> {{emptyDesc}}</span>
        </div>
    </van-popup>
</template>

<script setup lang="ts">
import { PickerOption } from 'vant';

const props = defineProps({
    defaultIndex: {default: 0},
    valueKey: [String, Number],
    title: String,
    emptyDesc: {
        default: '暂无数据'
    },
    loading: {type: Boolean,},
    range: {
        default: () => []
    },
    show: {type: Boolean}
})

const emit = defineEmits<{
    (e: 'update:show', value: boolean): void;
    (e: 'confirm', value: any[]): void;
}>()

function closePopup() {
    emit('update:show', false)
}

function confirm({selectedIndexes}: PickerOption) {
    let result: any = []
    result.push(props.range[selectedIndexes])
    closePopup()
    emit('confirm', result)
}

function cancel() {
    closePopup()
}

</script>

<style scoped>
.toolbar view:last-child{
  color: #2B9B37 !important;
}


.picker-popup-empty {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.picker-popup-empty .empty-image {
  width: 320px;
  height: 320px;
}

.empty-text{
  font-size: 26px;
  color: #d8d8d8;
}
</style>